---
title: Video
description: Usage instructions for the Video component
---

import localVideo from './local-video.mp4';
import localPoster from './local-poster.jpg';

<PageDescription>


The `<Video>` component can render a Vimeo player or a html video player.

</PageDescription>


## Example

<Title>Vimeo</Title>

<Video title="Carbon homepage video" vimeoId="359578263" />

<Title>Video</Title>

<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
  <track
    kind="captions"
    default
    src="/videos/vtt/hero-video.vtt"
    srcLang="en"
  />
</Video>

<Title>Video in MDX</Title>

<Video src={localVideo} poster={localPoster} />

## Code

<Title>Vimeo</Title>

```mdx path=components/Video/Video.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Video
<Video title="Carbon homepage video" vimeoId="322021187" />
```

<Title>Video</Title>

```mdx path=components/Video/Video.js src=https://github.com/carbon-design-system/gatsby-theme-carbon/tree/main/packages/gatsby-theme-carbon/src/components/Video
<Video src="/videos/hero-video.mp4" poster="/images/poster.png">
  <track
    kind="captions"
    default
    src="/videos/vtt/hero-video.vtt"
    srcLang="en"
  />
</Video>
```

<Title>Video in MDX</Title>

```mdx path=components/Video.mdx src=https://github.com/carbon-design-system/gatsby-theme-carbon/blob/main/packages/example/src/pages/components/Video/index.mdx
import localVideo from './local-video.mp4';
import localPoster from './local-poster.jpg';

<Video src={localVideo} poster={localPoster} />
```

### Props

| property | propType                                                                     | required | default | description                                                                                                                                                                                                                                                                                                                              |
| -------- | ---------------------------------------------------------------------------- | -------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| vimeoId  | string                                                                       |          |         | To find your `vimeoId`, go to the Vimeo page and find the video you want to put on your website. Once it is loaded, look at the URL and look for the numbers that come after the slash (/).                                                                                                                                              |
| src      | string                                                                       |          |         | Use the html `<video>` player with a local `.mp4` video                                                                                                                                                                                                                                                                                  |
| title    | string                                                                       |          |         | Vimeo title                                                                                                                                                                                                                                                                                                                              |
| poster   | string                                                                       |          |         | Provides an image to show before the video loads, only works with `src`                                                                                                                                                                                                                                                                  |
| children | [`<track>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/track) |          |         | _non-vimeo only_ – Provide `.vtt` file in your static directory to make your videos more accessible. Then add a track element with a src pointing to it Check out [this simple tutorial](https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API#Tutorial_on_how_to_write_a_WebVTT_file) for getting started with writing vtt files. |
| autoPlay | boolean                                                                      |          |         | Whether or not the video should autoplay.                                                                                                                                                                                                                                                                                                |
